<template>
  <view class="setting-container">
	  <status-bar></status-bar>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
      </view>
      <view class="nav-title">更多设置</view>
    </view>
    
    <!-- 停工状态区域 -->
    <view class="status-card" v-if="false" >
      <view class="status-header">
        <view class="status-title">已停工</view>
        <switch :checked="workStopped" color="#4c9bfb" @change="toggleWorkStatus" />
      </view>
      <view class="status-desc">您当前处于停工状态，不能接单</view>
      <view class="status-time">停工时间：2025-05-29 - 2148-05-29</view>
    </view>
    
    <!-- 菜单列表区域 -->
    <view class="menu-list">
      <view class="list-cell list-cell-arrow" @click="goToLegal" v-if="false">
        <view class="menu-item-box">
          <text>相关法律条款</text>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="navigateTo('/pages/mine/privacy')" v-if="false">
        <view class="menu-item-box">
          <text>隐私政策</text>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="navigateTo('/pages/mine/about')" v-if="false">
        <view class="menu-item-box">
          <text>关于指尖帮</text>
        </view>
      </view>

      <view class="list-cell list-cell-arrow" @click="goToPerfectInfo">
        <view class="menu-item-box">
          <text class="menu-icon iconfont icon-process"></text>
          <text>资料完善</text>
        </view>
      </view>

      <view class="list-cell list-cell-arrow" @click="showCancelAccountConfirm">
        <view class="menu-item-box">
          <text>注销账号</text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="logout">
      退出登录
    </view>
  </view>
</template>

<script>
import { cancelAccount } from '@/api/app/master/master.js'
export default {
  data() {
    return {
      workStopped: true
    }
  },
  methods: {
     goBack() {
      uni.navigateBack()
    },
    toggleWorkStatus(e) {
      this.workStopped = e.detail.value;
    },
    goToLegal() {
      uni.navigateTo({
        url: '/pages/common/webview?pageTitle=' + encodeURIComponent('相关法律条款') +
         '&url=' + encodeURIComponent('https://www.baidu.com')
      });
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    goToPerfectInfo() {
      uni.navigateTo({
        url: '/pages/perfectInfo'
      });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录信息
            uni.removeStorageSync('token');
            uni.removeStorageSync('App-Token');
            uni.removeStorageSync('userInfo');
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login'
            });
          }
        }
      });
    },
    
    // 显示注销账号确认弹窗
    showCancelAccountConfirm() {
      uni.showModal({
        title: '注销账号',
        content: '注销账号后将无法登录，确定要注销吗？',
        success: (res) => {
          if (res.confirm) {
            this.handleCancelAccount();
          }
        }
      });
    },
    
    // 处理注销账号
    handleCancelAccount() {
      uni.showLoading({
        title: '处理中...'
      });
      
      cancelAccount().then(res => {
        uni.hideLoading();
        if (res.code === 200) {
          uni.showToast({
            title: '账号已注销',
            icon: 'success'
          });
          
          // 清除登录信息
          uni.removeStorageSync('token');
          uni.removeStorageSync('App-Token');
          uni.removeStorageSync('userInfo');
          
          // 跳转到登录页
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/login'
            });
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg || '注销失败',
            icon: 'none'
          });
        }
      }).catch(error => {
        uni.hideLoading();
        uni.showToast({
          title: '注销失败，请稍后重试',
          icon: 'none'
        });
        console.error('注销账号失败:', error);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4c9bfb;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.nav-back {
  position: absolute;
  left: 30rpx;
  font-size: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
}

/* 停工状态区域 */
.status-card {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.status-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.status-desc {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.status-time {
  font-size: 28rpx;
  color: #999;
}

/* 菜单列表 */
.menu-list {
  background-color: #fff;
}

.list-cell {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  color: #333;
  padding: 26rpx 30rpx;
}

.list-cell::after {
  content: '';
  position: absolute;
  border-bottom: 1px solid #eaeef1;
  transform: scaleY(0.5) translateZ(0);
  transform-origin: 0 100%;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

.list-cell-arrow::before {
  content: ' ';
  height: 10px;
  width: 10px;
  border-width: 2px 2px 0 0;
  border-color: #c0c0c0;
  border-style: solid;
  transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 30rpx;
}

.menu-item-box {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 32rpx;
}

/* 退出登录按钮 */
.logout-btn {
  margin: 60rpx 30rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #4c9bfb;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
}
.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

</style>